<template>
  <div class="index-wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="18" :xl="18" :lg="18">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">体检服务老人类别占比</div>
                <el-date-picker
                  v-model="year1"
                  type="year"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  size="mini"
                  value-format="yyyy"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  ref="chart1"
                  autoresize
                  :option="chart1"
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="16" :xl="16" :lg="16">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">年体检服务人数统计</div>
                <el-date-picker
                  v-model="year1"
                  type="year"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1">
                <v-chart
                  autoresize
                  :option="chart2"
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">服务老人类别统计</div>
                <el-date-picker
                  v-model="year1"
                  type="year"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1 medical-chart4">
                <v-chart
                  autoresize
                  :option="chart3"
                  style="width: 100%; height: 100%"
                />
                <div class="medical-room-wrap">
                  <div class="room-text" v-for="(item,index) in chartlist" :key="index">
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="16" :xl="16" :lg="16">
            <div class="medical-item medical-left-top">
              <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
              <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
              <div class="medical-header">
                <div class="medical-title">上门服务内容占比</div>
                <el-date-picker
                  v-model="year1"
                  type="year"
                  :editable="false"
                  placeholder="选择年月"
                  class="fr"
                  value-format="yyyy"
                  @change="handleChange"
                ></el-date-picker>
              </div>
              <div class="medical-chart1 medical-chart2">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartbottom1"
                    style="width: 150px; height: 150px;"
                  />
                  <div class="medical-right-title">照料护理</div>
                </div>
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartbottom2"
                    style="width: 150px; height: 150px;"
                  />
                  <div class="medical-right-title">卫生保洁</div>
                </div>
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartbottom3"
                    style="width: 150px; height: 150px;"
                  />
                  <div class="medical-right-title">改造维修</div>
                </div>
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartbottom4"
                    style="width: 150px; height: 150px;"
                  />
                  <div class="medical-right-title">生活配送</div>
                </div>
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartbottom5"
                    style="width: 150px; height: 150px;"
                  />
                  <div class="medical-right-title">出行陪护</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-right-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">年体检老人年龄数据统计</div>
            <el-date-picker
              v-model="year1"
              type="year"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div class="medical-chart1">
            <!-- <v-chart
                autoresize
                :option="chartright1"
                style="width: 235px; height: 235px;"
              /> -->
            <div
              id="charts"
              :options="chartOptions"
            ></div>
            <div class="charts-right">
              <p>全部人数</p>
              <span>{{dataNum}}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="24" :xl="24" :lg="24">
          <div class="medical-item medical-left-top">
            <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
            <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
            <div class="medical-header">
              <div class="medical-title">体检服务数据占比</div>
              <el-date-picker
                v-model="year1"
                type="year"
                :editable="false"
                placeholder="选择年月"
                class="fr"
                value-format="yyyy"
                @change="handleChange"
              ></el-date-picker>
            </div>
            <div class="medical-chart1 medical-right-wrap">
              <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright1"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">心电图筛查</div>
              </div>
              <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright2"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">B超筛查</div>
              </div>
              <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright3"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">血糖检测</div>
              </div>
              <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright4"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">血压检测</div>
              </div>
              <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright5"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">指氧饱和度</div>
              </div>
              <!-- <div class="medical-right-chart">
                <div class="medical-right-chart-item">
                  <v-chart
                    autoresize
                    :option="chartright6"
                    style="width: 200px; height: 200px;"
                  />
                </div>
                <div class="medical-right-title">其他</div>
              </div> -->
            </div>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  // import VabChart from "@/plugins/echarts";
  import VChart from 'vue-echarts'
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { PieChart } from "echarts/charts";
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from "echarts/components";
  import { getMedicineData, getservicedata } from "@/api/diseaseApi";
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);
  import highcharts from 'highcharts';
  import Highcharts3D from 'highcharts/highcharts-3d';
  Highcharts3D(highcharts);
  export default {
    name: "Index",
    components: {
      VChart,
      highcharts
    },
    data() {
      return {
        year1: "2021",
        dataNum: "",
        chartlist: ['低保老人', '独居老人', '高龄老人', '孤寡老人', '空巢老人', '三无老人', '五保户', '普通老人', '留守老人', '失独老人', '重残老人'],
        //体检服务老人类别占比
        chart1: {
          title: {
            show: false
          },
          tooltip: {
              trigger: 'item',
          		formatter: function(params){
          			return params.data.name +"岁 : "+params.data.value+"人" + " " + params.percent + "%";
          		}
          },
          legend: [
          	{
          		orient: 'horizontal',
          		bottom: '14%',
          		left: "center",
          		icon: "circle",
          		data: ['低保老人', '独居老人', '高龄老人', '孤寡老人', '空巢老人'],
          		itemWidth: 7,  // 设置宽度
          		itemHeight: 7, // 设置高度
          		itemGap: 5,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
          	},
            {
            	orient: 'horizontal',
            	bottom: '2%',
            	left: "center",
            	icon: "circle",
            	data: ['三无老人', '五保户', '普通老人', '留守老人', '失独老人', '重残老人'],
            	itemWidth: 7,  // 设置宽度
            	itemHeight: 7, // 设置高度
            	itemGap: 2,
            	textStyle: {
            		color: '#597093',
            		fontSize: 13
            	}
            }
          ],
          color: ["#5583FF", "#3EE09A", "#9B4AF8", "#FB497C", "#ff8d00", "#ffe400", "#00baff", "#ff8cb2", "#bf8cff", "#8c94ff", "#8cf8ff"],
          series: [
              {
          				type: 'pie',
          				center: ['50%', '40%'],
          				radius: ['35%', '50%'],
          				avoidLabelOverlap: false,
          				data: [],
          				label: {
          					color: "#fff",
          					formatter: '{b} {d}%',
          				},
          				emphasis: {
          				    itemStyle: {
          				        shadowBlur: 10,
          				        shadowOffsetX: 0,
          				        shadowColor: 'rgba(0, 0, 0, 0.5)'
          				    }
          				}
              }
          ]
        },
        //年体检服务人数统计
        chart2: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "5%",
            right: "0",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontWeight: "bold",
                fontSize: 13
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
                name: '人',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 5,
                  shadowBlur: 10,
                  shadowColor: '#062B55',
                  shadowOffsetY: 0,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: '#0997FD'
                    },
                    {
                      offset: 0.2,
                      color: '#07C2FC'
                    },
                    {
                      offset: 0.4,
                      color: '#0B80FD'
                    },
                    {
                      offset: 0.6,
                      color: '#0B80FD'
                    },
                    {
                      offset: 0.8,
                      color: '#0999FD'
                    },
                    {
                      offset: 1,
                      color: '#0A8AFD'
                    },
                  ])
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 0.8,
                  //右，下，左，上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#07C5FC'
                    },
                    {
                      offset: 0.5,
                      color: '#0D5B8A'
                    },
                    {
                      offset: 1,
                      color: '#0E2757'
                    },
                  ])
                },
                emphasis: {
                  focus: 'series'
                },
              data: [],
            },
          ],
        },
        //服务老人类别统计
        chart3: {
          polar: {
              radius: [10, '70%'],
              center: ['35%', "50%"]
            },
            angleAxis: {
              startAngle: 75,
            },
            radiusAxis: {
              type: 'category',
              data: ['低保老人', '独居老人', '高龄老人', '孤寡老人', '空巢老人', '三无老人', '五保户', '普通老人', '留守老人', '失独老人', '重残老人'],
              axisLabel: {
                show: false
              },
            },

            tooltip: {},
            series: {
              type: 'bar',
              data: [],
              coordinateSystem: 'polar',
              label: {
                show: false
              },
              itemStyle: {
            		color: function(params) {
            				// 给出颜色组
                    if(params.dataIndex == 1) {
            				  return "#5583FF"
            				} else if(params.dataIndex == 2) {
            				  return "#3EE09A"
            				} else if(params.dataIndex == 3) {
            				  return "#9B4AF8"
            				} else if(params.dataIndex == 4) {
            				  return "#FB497C"
            				} else if(params.dataIndex == 5) {
            				  return "#ff8d00"
            				} else if(params.dataIndex == 6) {
            				  return "#ffe400"
            				} else if(params.dataIndex == 7) {
            				  return "#00baff"
            				} else if(params.dataIndex == 8) {
            				  return"#ff8cb2"
            				} else if(params.dataIndex == 9) {
            				  return "#bf8cff"
            				} else if(params.dataIndex == 10) {
            				  return "#8c94ff"
            				} else if(params.dataIndex == 11) {
            				  return "#8cf8ff"
            				}
            		}
              },
              label: {
                show: false,
                position: 'middle',
                formatter: '{b}: {c}'
              }
            }
        },
        //上门服务内容占比
        chartbottom1: {
          title: [
              {
                  text: '20%',
                  textStyle: {
                      color: '#fff',
                      fontSize: 24,
                      fontWeight: 400,
                  },
                  left: '34%',
                  top: '42%',
              }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.data.name + ':' + params.data.value + '次';
            }
          },
          legend: {
            show: false
          },
          angleAxis: {
              polarIndex: 0,
              min: 0,
              max: 100,
              show: false,
              clockwise: false,
              boundaryGap: ['40%', '40%'],
              startAngle: 45,
          },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            polar: [
                {
                    center: ['50%', '50%'], //中心点位置
                    radius: [40, 70] //图形大小
                },
            ],
          series: [
            {
                type: 'bar',
                z: 10,
                name: '完成度',
                data: [{
                  name: "照料护理",
                  value: 50
                }],
                showBackground: false,
                backgroundStyle: {
                    borderWidth: 10,
                    width: 10,
                },
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 35, //大的占比环
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#01D6FD'
                          },
                          {
                            offset: 1,
                            color: '#0C75FD'
                          },
                        ])
                    },
                },
            },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: [40, 70],
                center: ['50%', '50%'], //中心点位置
                startAngle: 90,
                hoverAnimation: false,
                clockWise: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: '#2A3D60',
                        shadowBlur: 0,
                        shadowColor: '#66666a',
                    },
                },
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [100],
            },
          ]
        },
        chartbottom2: {
          title: [
              {
                  text: '20%',
                  textStyle: {
                      color: '#fff',
                      fontSize: 24,
                      fontWeight: 400,
                  },
                  left: '34%',
                  top: '42%',
              }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.data.name + ':' + params.data.value + '次';
            }
          },
          legend: {
            show: false
          },
          angleAxis: {
              polarIndex: 0,
              min: 0,
              max: 100,
              show: false,
              clockwise: false,
              boundaryGap: ['40%', '40%'],
              startAngle: 45,
          },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            polar: [
                {
                    center: ['50%', '50%'], //中心点位置
                    radius: [40, 70] //图形大小
                },
            ],
          series: [
            {
                type: 'bar',
                z: 10,
                name: '完成度',
                data: [{
                  name: "卫生保洁",
                  value: 50
                }],
                showBackground: false,
                backgroundStyle: {
                    borderWidth: 10,
                    width: 10,
                },
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 35, //大的占比环
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#663EFB'
                          },
                          {
                            offset: 1,
                            color: '#C625D8'
                          },
                        ])
                    },
                },
            },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: [40, 70],
                center: ['50%', '50%'], //中心点位置
                startAngle: 90,
                hoverAnimation: false,
                clockWise: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: '#2A3D60',
                        shadowBlur: 0,
                        shadowColor: '#66666a',
                    },
                },
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [100],
            },
          ]
        },
        chartbottom3: {
          title: [
              {
                  text: '20%',
                  textStyle: {
                      color: '#fff',
                      fontSize: 24,
                      fontWeight: 400,
                  },
                  left: '34%',
                  top: '42%',
              }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.data.name + ':' + params.data.value + '次';
            }
          },
          legend: {
            show: false
          },
          angleAxis: {
              polarIndex: 0,
              min: 0,
              max: 100,
              show: false,
              clockwise: false,
              boundaryGap: ['40%', '40%'],
              startAngle: 45,
          },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            polar: [
                {
                    center: ['50%', '50%'], //中心点位置
                    radius: [40, 70] //图形大小
                },
            ],
          series: [
            {
                type: 'bar',
                z: 10,
                name: '完成度',
                data: [{
                  name: "改造维修",
                  value: 50
                }],
                showBackground: false,
                backgroundStyle: {
                    borderWidth: 10,
                    width: 10,
                },
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 35, //大的占比环
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#FFC000'
                          },
                          {
                            offset: 1,
                            color: '#FF8400'
                          },
                        ])
                    },
                },
            },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: [40, 70],
                center: ['50%', '50%'], //中心点位置
                startAngle: 90,
                hoverAnimation: false,
                clockWise: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: '#2A3D60',
                        shadowBlur: 0,
                        shadowColor: '#66666a',
                    },
                },
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [100],
            },
          ]
        },
        chartbottom4: {
          title: [
              {
                  text: '20%',
                  textStyle: {
                      color: '#fff',
                      fontSize: 24,
                      fontWeight: 400,
                  },
                  left: '34%',
                  top: '42%',
              }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.data.name + ':' + params.data.value + '次';
            }
          },
          legend: {
            show: false
          },
          angleAxis: {
              polarIndex: 0,
              min: 0,
              max: 100,
              show: false,
              clockwise: false,
              boundaryGap: ['40%', '40%'],
              startAngle: 45,
          },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            polar: [
                {
                    center: ['50%', '50%'], //中心点位置
                    radius: [40, 70] //图形大小
                },
            ],
          series: [
            {
                type: 'bar',
                z: 10,
                name: '完成度',
                data: [{
                  name: "生活配送",
                  value: 50
                }],
                showBackground: false,
                backgroundStyle: {
                    borderWidth: 10,
                    width: 10,
                },
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 35, //大的占比环
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#30F998'
                          },
                          {
                            offset: 1,
                            color: '#00D5CC'
                          },
                        ])
                    },
                },
            },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: [40, 70],
                center: ['50%', '50%'], //中心点位置
                startAngle: 90,
                hoverAnimation: false,
                clockWise: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: '#2A3D60',
                        shadowBlur: 0,
                        shadowColor: '#66666a',
                    },
                },
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [100],
            },
          ]
        },
        chartbottom5: {
          title: [
              {
                  text: '20%',
                  textStyle: {
                      color: '#fff',
                      fontSize: 24,
                      fontWeight: 400,
                  },
                  left: '34%',
                  top: '42%',
              }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.data.name + ':' + params.data.value + '次';
            }
          },
          legend: {
            show: false
          },
          angleAxis: {
              polarIndex: 0,
              min: 0,
              max: 100,
              show: false,
              clockwise: false,
              boundaryGap: ['40%', '40%'],
              startAngle: 45,
          },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            polar: [
                {
                    center: ['50%', '50%'], //中心点位置
                    radius: [40, 70] //图形大小
                },
            ],
          series: [
            {
                type: 'bar',
                z: 10,
                name: '完成度',
                data: [{
                  name: "出门陪护",
                  value: 50
                }],
                showBackground: false,
                backgroundStyle: {
                    borderWidth: 10,
                    width: 10,
                },
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 35, //大的占比环
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#9C4BF9'
                          },
                          {
                            offset: 1,
                            color: '#5D04BF'
                          },
                        ])
                    },
                },
            },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: [40, 70],
                center: ['50%', '50%'], //中心点位置
                startAngle: 90,
                hoverAnimation: false,
                clockWise: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: '#2A3D60',
                        shadowBlur: 0,
                        shadowColor: '#66666a',
                    },
                },
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [100],
            },
          ]
        },
        chartright1: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#3F89FF", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#3F89FF",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright2: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#FFA800", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#FFA800",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright3: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#0FE0BC", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#0FE0BC",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright4: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#ED4FFF", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#ED4FFF",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright5: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#9C4BF9", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#9C4BF9",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        chartright6: {
          title: {
              show: false
          },
          tooltip: {
            trigger: "item",
            formatter: function(params){
            	return params.data.name +":"+params.data.value+"人";
            }
          },
          legend: {
            show: false
          },
          color: ["#03C1FD", "#344058"],
          series: [
            {
                name: '访问来源',
                type: 'pie',
            		center: ['50%', '50%'],
            		radius: [68, 73],
            		clockwise: false,
            		avoidLabelOverlap: false,
            		itemStyle: {
            			borderRadius: 10,
            			borderWidth: 2
            		},
                data: [
                  {
                    name: "心电图筛查",
                    value: 50
                  },
                  {
                    name: "其余类型",
                    value: 60
                  },
                ],
            		label: {
            			show: false,
            			position: 'center',
            			normal: {
            					show: true,
            					position: 'center',
            					color: "#03C1FD",
            					fontSize: 30,
            					fontFamily : "微软雅黑",
            					formatter: function(params) {
            						if(params.dataIndex == 0) {
            							return params.percent + "%"
            						} else {
            							if(params.percent == 0) {
            								return '0%'
            							} else {
            								return ((10000 - params.percent * 100) / 100).toFixed(2) + "%"
            							}
            						}
            					}
            			},
            			emphasis: {//中间文字显示
            					show: true,
            			}
            		},
            		labelLine: {
            			show: false
            		},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
          ],
        },
        //年体检老人年龄数据统计
        chartOptions: {
          chart: {
          		type: 'pie',
          		animation: false,
              backgroundColor: 'rgba(255, 255, 255, 0)',
              plotBorderColor : null,
              plotBackgroundColor: null,
              plotBackgroundImage:null,
              plotBorderWidth: null,
              plotShadow: false,
          		events: {
                load: function() {
                  var each = highcharts.each,
                    points = this.series[0].points;
                  each(points, function(p, i) {
                    p.graphic.attr({
                      translateY: -p.shapeArgs.ran
                    });
                    p.graphic.side1.attr({
                      translateY: -p.shapeArgs.ran
                    });
                    p.graphic.side2.attr({
                      translateY: -p.shapeArgs.ran
                    });
                  });
                }
              },
          		options3d: {
          			enabled: true,
          			alpha: 55,
          			beta: 0
          		}
          	},
            colors: ['#5583FF', '#3EE09A', '#FFC000', '#FB497C','#FF8B00','#9B4AF8'],
            title: {
              text: ""
            },
            legend: {
              itemDistance: 40,
              itemMarginTop: 30,
              symbolWidth: 11,
              symbolHeight: 11,
              y: -40,
              itemStyle: {
                color: '#597093',
                fontSize: '14px',
              },
              itemHoverStyle: {
                color: '#4a5b74',
              }
            },
            credits: {
              enabled: false
            },
          	plotOptions: {
          		pie: {
          			allowPointSelect: true,
          			cursor: 'pointer',
          			depth: 35,
                showInLegend: true,
          			dataLabels: {
          				enabled: false
          			}
          		}
          	},
          	series: [{
          		type: 'pie',
          		name: '年检老人统计',
              center: ["50%","45%"],
          		data: [{
          			'name': '贫困老人',
          			y: 20,
          			// h: 15
          		}, {
          			name: '孤寡老人',
          			y: 30,
          			// h: 50
          		}, {
          			name: '失独老人',
          			y: 40,
          			// h: 60
          		}, {
          			'name': '贫困老人',
          			y: 10,
          			// h: 2
          		}, {
          			'name': '孤寡老人',
          			y: 5,
          			// h: 15
          		}, {
          			'name': '失独老人',
          			y: 5,
          			// h: 30
          		}]
          	}]
        }
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      var date = new Date() // 获取时间
      var year = date.getFullYear() // 获取年
      console.log(year)
      this.year1 = year + ''
      this.getservicedata({year: "2021"});
    },
    methods: {
      handleChange(value) {
        var date = new Date() // 获取时间
        var year = date.getFullYear() // 获取年
        var year1 = year + ''
        this.year1 = value
        if (value == year1) {
          this.getservicedata({year: '2021'})
        } else {
          this.getservicedata({year: value})
        }
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
      getservicedata(data) {
        getservicedata('get', data).then(res=>{

          let data = res.data;
          //体检服务老人类别占比
          let t1 = data.t1;
          let seriesdata1 = [];
          for(let key in t1) {
            if(t1.hasOwnProperty(key)){
              const element = t1[key];
              seriesdata1.push({
                name: key,
                value: element
              })
            }
          }
          this.chart1.series[0].data = seriesdata1;
          //年体检服务人数统计
          let t3 = data.t3;
          let seriesdata3 = [];
          let ill1xAxisData = [];
          for (const key in t3) {
            if (t3.hasOwnProperty(key)) {
              const element = t3[key];
              seriesdata3.push(element);
              ill1xAxisData.push(key);
            }
          }
          this.chart2.xAxis.data = ill1xAxisData;
          this.chart2.series[0].data = seriesdata3;

          //服务老人类别统计
          let t2 = data.t2;
          let seriesdata2 = [];
          for(let key in t2) {
            if(t2.hasOwnProperty(key)){
              const element = t2[key];
              seriesdata2.push({
                name: key,
                value: element
              })
            }
          }
          this.chart3.series.data = seriesdata2;
          //上门服务内容占比
          let t4 = data.t4;
          let seriesdata4 = [];
          let seriesNum = 0;
          for(let key in t4) {
            if(t4.hasOwnProperty(key)){
              const element = t4[key];
              seriesNum += element;
            }
          }
          for(let key in t4) {
            if(t4.hasOwnProperty(key)) {
              const element = t4[key];
              if(key == '照料护理') {
                let zlhl = t4['照料护理'];
                this.chartbottom1.title[0].text = zlhl == 0 ? '0%' : (((zlhl / seriesNum) * 100).toFixed(0) + "%");
                this.chartbottom1.series[0].data = [
                  {
                    name: key,
                    value: element
                  }
                ];
              } else if(key == '生活配送') {
                let shps = t4['生活配送'];
                this.chartbottom4.title[0].text = shps == 0 ? '0%' : (((shps / seriesNum) * 100).toFixed(0) + "%");
                this.chartbottom4.series[0].data = [
                  {
                    name: key,
                    value: element
                  }
                ];
              } else if(key == '改造维修') {
                let gzwx = t4['改造维修'];
                this.chartbottom3.title[0].text = gzwx == 0 ? '0%' : (((gzwx / seriesNum) * 100).toFixed(0) + "%");
                this.chartbottom3.series[0].data = [
                  {
                    name: key,
                    value: element
                  }
                ];
              } else if(key == '卫生保洁') {
                let wsbj = t4['卫生保洁'];
                this.chartbottom2.title[0].text = wsbj == 0 ? '0%' : (((wsbj / seriesNum) * 100).toFixed(0) + "%");
                this.chartbottom2.series[0].data = [
                  {
                    name: key,
                    value: element
                  }
                ];
              } else if(key == '出行陪护') {
                let cxph = t4['出行陪护'];
                this.chartbottom5.title[0].text = cxph == 0 ? '0%' : (((cxph / seriesNum) * 100).toFixed(0) + "%");
                this.chartbottom5.series[0].data = [
                  {
                    name: key,
                    value: element
                  }
                ];
              }
            }
          }

          this.chartbottom1.angleAxis.max = seriesNum;
          this.chartbottom2.angleAxis.max = seriesNum;
          this.chartbottom3.angleAxis.max = seriesNum;
          this.chartbottom4.angleAxis.max = seriesNum;
          this.chartbottom5.angleAxis.max = seriesNum;

          //体检服务数据占比
          let t6 = data.t6;
          for(let key in t6) {
            if(t6.hasOwnProperty(key)){
              const element = t6[key];
              let step = [];
              if(key == '心电图筛查') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != '心电图筛查') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright1.series[0].data = step;
              } else if(key == 'B超筛查') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != 'B超筛查') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright2.series[0].data = step;
              } else if(key == '血糖检测') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != '血糖检测') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright3.series[0].data = step;
              } else if(key == '血压检测') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != '血压检测') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright4.series[0].data = step;
              } else if(key == '指氧饱和度') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != '指氧饱和度') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright5.series[0].data = step;
              } else if(key == '其他') {
                let value = 0;
                step.push({
                  name: key,
                  value: t6[key]
                })
                for(let key in t6) {
                	if(key != '其他') {
                		value += parseInt(t6[key]);
                	}
                }
                step.push({
                	value: value,
                	name: '其余类型'
                })
                this.chartright6.series[0].data = step;
              }
            }
          }
          //年体检老人年龄数据统计
          let t5 = data.t5;
          let dataT5 = [];
          let dataNum = 0;
          // 100, 150, 80, 130, 48
          let resT5 = {
              "60以下": 100,
              "61-70": 150,
              "71-80": 80,
              "81-90": 130,
              "90以上": 48
            };
          for(let key in t5) {
            if(t5.hasOwnProperty(key)){
              const element = t5[key];
              dataT5.push({
                name: key,
                h: Math.floor(Math.random()*40+10),
                y: resT5[key]
              })
              dataNum += element;
            }
          }
          // this.dataNum = dataNum;
          this.dataNum = 669;
          this.chartOptions.series[0].data = dataT5;
          // 修改3d饼图绘制过程
          var each = highcharts.each,
          	round = Math.round,
          	cos = Math.cos,
          	sin = Math.sin,
          	deg2rad = Math.deg2rad;
          highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
          	proceed.apply(this, [].slice.call(arguments, 1));
          	// Do not do this if the chart is not 3D
          	if (!this.chart.is3d()) {
          		return;
          	}
          	var series = this,
          		chart = series.chart,
          		options = chart.options,
          		seriesOptions = series.options,
          		depth = seriesOptions.depth || 0,
          		options3d = options.chart.options3d,
          		alpha = options3d.alpha,
          		beta = options3d.beta,
          		z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
          	z += depth / 2;
          	if (seriesOptions.grouping !== false) {
          		z = 0;
          	}
          	each(series.data, function(point) {
          		var shapeArgs = point.shapeArgs,
          			angle;
          		point.shapeType = 'arc3d';
          		var ran = point.options.h;
          		shapeArgs.z = z;
          		shapeArgs.depth = depth * 0.75 + ran;
          		shapeArgs.alpha = alpha;
          		shapeArgs.beta = beta;
          		shapeArgs.center = series.center;
          		shapeArgs.ran = ran;
          		angle = (shapeArgs.end + shapeArgs.start) / 2;
          		point.slicedTranslation = {
          			translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
          			translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
          		};
          	});
          });
          (function(H) {
          	H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
          		// Run original proceed method
          		var ret = proceed.apply(this, [].slice.call(arguments, 1));
          		ret.zTop = (ret.zOut + 0.5) / 100;
          		return ret;
          	});
          }(highcharts));
          highcharts.chart("charts", this.chartOptions);
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  @keyframes rotate {
  	    from {
  	        transform: rotate(0deg);
  	    }
  	    to {
  	        transform: rotate(360deg);
  	    }
  	}
    #charts{
      height: 100%;
    }
    .charts-right{
      text-align: center;
      position: absolute;
      top: 398px;
      width: 100%;
      left: 0;
      p{
        font-size: 28px;
        color: #ffffff;
      }
      span{
        margin-top: 10px;
        font-size: 37px;
        color: #fff;
        display: block;
      }
    }
    .fr{
        width: 117px;
        position: absolute;
        right: 23px;
        background: transparent;
        ::v-deep{
          .el-input__inner{
            border-color: #334973;
            background: transparent;
            color: #fff;
          }
          .el-input__prefix{
                font-size: 20px;
                color: #5391d9;
          }
        }
    }
    .medical-right-wrap{
      display: flex;
      align-items: center;
      justify-content: space-around;
      .medical-right-chart-item{
        width: 200px;
        height: 200px;
        position: relative;
        &::before{
          content: "";
          display: block;
          position: absolute;
          box-sizing: border-box;
          left: 0;
          top: 0;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          border: 14px dashed #344059;
          animation: rotate 30s infinite;
        }
      }
      .medical-right-title{
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 26px;
      }
    }
  .index-wrap {
    min-height: calc( 100vh - 65px) !important;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: url(../../assets/medical/bg.png) no-repeat;
    background-size: cover;
    .medical-left-top{
      height: 348px;
    }
    .medical-right-top{
      height: 718px;
      .medical-chart1{
        height: 678px;
        position: relative;
      }
    }
    .medical-chart4{
      position: relative;
    }
    .medical-room-wrap{
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 8px;
      right: 40px;
      text-align: center;
      color: #597093;
      height: 265px;
      overflow: auto;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .room-text {
          margin: 12px 0;
          padding-left: 16px;
          line-height: 13px;
          position: relative;
          &::before{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #5583FF;
          }
          &:nth-child(1) {
            &::before {
              background-color: #8cf8ff;
            }
          }
          &:nth-child(2) {
            &::before {
              background-color: #8c94ff;
            }
          }
          &:nth-child(3) {
            &::before {
              background-color: #bf8cff;
            }
          }
          &:nth-child(4) {
            &::before {
              background-color: #ff8cb2;
            }
          }
          &:nth-child(5) {
            &::before {
              background-color: #00baff;
            }
          }
          &:nth-child(6) {
            &::before {
              background-color: #ffe400;
            }
          }
          &:nth-child(7) {
            &::before {
              background-color: #ff8d00;
            }
          }
          &:nth-child(8) {
            &::before {
              background-color: #FB497C;
            }
          }
          &:nth-child(9) {
            &::before {
              background-color: #9B4AF8;
            }
          }
          &:nth-child(10) {
            &::before {
              background-color: #3EE09A;
            }
          }
          &:nth-child(11) {
            &::before {
              background-color: #5583FF;
            }
          }
      }
    }
    .medical-chart2{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .medical-bot-title{
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 60px;
      }
      .medical-right-title{
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 26px;
      }
    }
    .medical-chart1{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      margin-top: 10px;
    }
    .medical-chart1-xline{
      position: absolute;
      top: 72px;
      left: 23px;
      font-size: 13px;
      color: #226CA3;
      line-height: 12px;
      font-weight: bold;
    }
    .medical-chart1-xline li:nth-child(n+2){
      margin-top: 42px;
    }
    .medical-item{
      width: 100%;
      border: 2px solid #394E75;
      border-radius: 10px 0px 0 10px;
      position: relative;
      background: rgba(36, 57, 96, 0.13);
      box-shadow: inset 0 0 19px rgb(26 61 122);
      .medical-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px 20px 0 23px;
        height: 40px;
        box-sizing: border-box;
        .medical-title{
          position: absolute;
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          padding-left: 20px;
          line-height: 20px;
          &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 11px;
            height: 20px;
            background-color: #009CFF;
          }
        }
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 7px solid #4DBECE;
        border-left: 7px solid transparent;
        z-index: 1;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 17px solid #4DBECE;
        border-left: 17px solid transparent;
      }
      .medical-top{
        width: 71px;
        height: 65px;
        position: absolute;
        left: -2px;
        top: -4px;
        z-index: 1;
				object-fit: inherit;
      }
      .medical-bot{
        width: 71px;
        position: absolute;
        left: -2px;
        bottom: -4px;
        z-index: 1;
      }
    }
  }
</style>
